<template>
	<el-container>
		<el-header :height="headerHeight" style="display:block">
			<el-row :gutter="20">
				<el-col :span="24">
					<el-form :inline="true" class="content-input-length" label-width="68px">
						<el-form-item label="用户昵称">
							<el-input v-model="search.nickname" placeholder="用户昵称" clearable/>
						</el-form-item>
						<el-form-item label="登录账号">
							<el-input v-model="search.username" placeholder="登录账号" clearable/>
						</el-form-item>
						<el-form-item label="用户状态">
							<el-select placeholder="请选择" v-model="search.status" clearable>
								<el-option label="生效" value="1"/>
								<el-option label="锁定" value="3"/>
							</el-select>
						</el-form-item>
						<el-form-item label="所属角色">
							<el-select placeholder="请选择" v-model="search.roleIds" filterable clearable>
								<el-option v-for="item in roleDropDownList" :key="item.roleId" :label="item.name"
										   :value="item.roleId"/>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
							<el-button icon="el-icon-refresh" @click="searchReset"></el-button>
						</el-form-item>
					</el-form>
				</el-col>

			</el-row>
			<el-row :gutter="20" id="operation" v-auth="['user:add','user:batchDelete']">
				<el-col :span="24">
					<el-button v-auth="['user:add']" type="primary" plain icon="el-icon-plus" size="small" @click="add">
						新增
					</el-button>
					<el-button v-auth="['user:batchDelete']" type="danger" plain icon="el-icon-delete" size="small"
							   :disabled="selection.length==0"
							   @click="batch_del">删除
					</el-button>

					<!--
					<el-button v-auth="['user:import']" type="info" plain icon="el-icon-bottom" size="small" @click="data_import">导入
					</el-button>
					<el-button v-auth="['user:export']" type="warning" plain icon="el-icon-top" size="small" :disabled="selection.length==0"
							   @click="batch_export">导出
					</el-button>
					-->
				</el-col>
			</el-row>
		</el-header>

		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj"
					 :hideImport="!this.$TOOL.auth.verification(['user:import'])"
					 :importFun="data_import"
					 :hideExport="!this.$TOOL.auth.verification(['user:export'])"
					 :exportFun="batch_export"
					 @selection-change="selectionChange" remoteSort remoteFilter>
				<el-table-column type="selection" width="50" align="center"></el-table-column>
				<el-table-column label="用户ID" prop="id" width="180" align="center"></el-table-column>
				<el-table-column label="用户头像" width="138" column-key="filterAvatar" align="center">
					<template #default="scope">
						<el-avatar v-if="scope.row.headPortrait" :src="scope.row.headPortrait"
								   size="small"></el-avatar>
						<el-avatar v-else size="small">{{ scope.row.nickname.substring(0, 1) }}</el-avatar>
					</template>
				</el-table-column>
				<el-table-column label="用户昵称" prop="nickname" width="138" align="center"></el-table-column>
				<el-table-column label="登录账号" prop="username" width="138" column-key="filterUserName"
								 align="center"></el-table-column>
				<el-table-column label="所属角色" width="140" align="center">
					<template #default="scope">
						<div v-for="item in scope.row.roles" v-bind:key="item.roleId">{{ item.name }}</div>
					</template>
				</el-table-column>
				<el-table-column label="用户状态" width="138" align="center">
					<template #default="scope">
						<el-tag v-if="scope.row.status==1" class="ml-2" type="success">生效</el-tag>
						<el-tag v-if="scope.row.status==3" class="ml-2" type="error">锁定</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="用户邮箱" prop="email" width="160" align="center"></el-table-column>
				<el-table-column label="在线状态" width="140" align="center">
					<template #default="scope">
						<el-tag v-if="scope.row.onlineStatus==1" style="width: 63px" class="ml-2" type="success">在线
							({{ scope.row.onlineQuantity }})
						</el-tag>
						<el-tag v-if="scope.row.onlineStatus==0" style="width: 63px" class="ml-2" type="info">下线
							({{ scope.row.onlineQuantity }})
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="最后登陆时间" prop="lastLoginTime" width="146"
								 align="center"></el-table-column>
				<el-table-column label="最后登陆IP" prop="loginIpAddress" width="146"
								 align="center"></el-table-column>
				<el-table-column label="创建时间" prop="createTime" width="146" align="center"></el-table-column>
				<el-table-column label="操作" fixed="right" align="center"
								 :width="this.$TOOL.auth.setTableOperationWidth(['user:list','user:update', ['user:delete','user:resetPassword','user:batchKickout','user:exportArchives','user:logInfo']])"
								 v-if="this.$TOOL.auth.verification(['user:list','user:update','user:delete','user:resetPassword','user:batchKickout','user:exportArchives','user:logInfo'])">
					<template #default="scope">
						<el-button v-auth="['user:list']" plain size="small"
								   @click="table_show(scope.row, scope.$index)">详情
						</el-button>
						<el-button v-auth="['user:update']" plain type="primary" size="small"
								   @click="table_edit(scope.row, scope.$index)">
							编辑
						</el-button>
						<el-dropdown trigger="click"
									 v-auth="['user:delete','user:resetPassword','user:batchKickout','user:exportArchives','user:logInfo']">
							<el-button plain size="small" icon="el-icon-more"></el-button>
							<template #dropdown>
								<el-dropdown-menu style="padding: 4px 15px">
									<el-row v-auth="['user:delete','user:resetPassword','user:batchKickout']"
											style="padding-top: 4px; padding-bottom: 4px">
										<el-button v-auth="['user:delete']" v-if="!scope.row.canDelete" disabled>
											数据删除
										</el-button>
										<el-button v-auth="['user:delete']" v-else @click="table_del(scope.row)">
											数据删除
										</el-button>

										<el-button v-auth="['user:resetPassword']" v-if="!scope.row.canDelete"
												   disabled>重置密码
										</el-button>
										<el-button v-auth="['user:resetPassword']" v-else
												   @click="table_refresh(scope.row)">重置密码
										</el-button>

										<el-button v-auth="['user:batchKickout']" v-if="scope.row.onlineStatus==0"
												   disabled>强制下线
										</el-button>
										<el-button v-auth="['user:batchKickout']" v-else
												   @click="table_offline(scope.row)">强制下线
										</el-button>
									</el-row>
									<el-row v-auth="['user:exportArchives','user:logInfo']"
											style="padding-top: 4px; padding-bottom: 4px">
										<el-button v-auth="['user:logInfo']" @click="table_log(scope.row)" divided>
											日志详情
										</el-button>

										<el-button v-auth="['user:exportArchives']" @click="table_archives(scope.row)">
											导出档案
										</el-button>
									</el-row>


								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="upsearch" @closed="dialog.save=false"></save-dialog>
	<import-dialog v-if="dialog.import" ref="importDialog" @success="upsearch"
				   @closed="dialog.import=false"></import-dialog>
</template>

<script>
import saveDialog from './save'
import importDialog from './import'

export default {
	name: 'user',
	components: {
		saveDialog,
		importDialog
	},
	data() {
		return {
			headerHeight: "45px",
			dialog: {
				save: false,
				import: false
			},
			apiObj: this.$API.system.user.list,
			selection: [],
			search: {
				userId: "",
				username: "",
				nickname: "",
				status: "",
				roleIds: [],
				roleIdMany: ""
			},
			//	角色列表数据下拉选项
			roleDropDownList: [],
		}
	},
	watch: {},
	created() {
		window.onresize = () => {
			return (() => {
				// 监听浏览器宽高变化
				this.headerHeight = this.$TOOL.page.updateHeight();
			})()
		}
	},
	mounted() {
		// 菜单页面中 <el-header :height="headerHeight">...</el-header> 头部查询条件和新增编辑按钮区域高度
		this.headerHeight = this.$TOOL.page.updateHeight();
		this.getInitData();
	},
	methods: {

		/**
		 * 加载初始化数据
		 * @returns {Promise<void>}
		 */
		async getInitData() {
			// 获取角色列表数据
			let res = await this.$API.system.role.listAll.get();
			this.roleDropDownList = res.data;
		},

		/**
		 * 搜索
		 */
		async upsearch() {
			this.$refs.table.upData(this.search)
		},

		/**
		 * 搜索条件重置
		 */
		async searchReset() {
			this.search = {
				userId: "",
				username: "",
				nickname: "",
				status: "",
				roleIds: [],
				roleIdMany: ""
			};
			this.upsearch();
		},

		/**
		 * 导入
		 */
		async data_import() {
			this.dialog.import = true
			this.$nextTick(() => {
				this.$refs.importDialog.open("import")
			})
		},

		/**
		 * 添加
		 */
		async add() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open("add")
			})
		},

		/**
		 * 编辑
		 * @param row
		 */
		async table_edit(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setData(row)
			})
		},

		/**
		 * 查看
		 * @param row
		 */
		async table_show(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('show').setData(row)
			})
		},

		/**
		 * 删除
		 * @param row
		 * @param index
		 * @returns {Promise<void>}
		 */
		async table_del(row) {
			let reqData = {userId: row.userId}
			this.$confirm(`确定删除 ${row.username} 账号吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				const loading = this.$loading();
				let res = await this.$API.system.user.del.delete(reqData);
				if (res.status == 200) {
					this.upsearch()
					this.$message.success("删除成功")
				}
				loading.close();
			}).catch(() => {

			})
		},

		/**
		 * 批量删除
		 * @returns {Promise<void>}
		 */
		async batch_del() {
			this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				const loading = this.$loading();
				let ids = [];
				for (let item of this.selection) {
					ids.push(item.userId)
				}
				let reqData = {userIdMany: ids.toString()}
				let res = await this.$API.system.user.delBatch.delete(reqData);
				if (res.status == 200) {
					this.upsearch()
					this.$message.success("删除成功")
				}
				loading.close();
			}).catch(() => {

			})
		},

		/**
		 * 批量导出
		 * @returns {Promise<void>}
		 */
		async batch_export() {
			let res = await this.$API.system.user.exportList.get(this.search);
			if (res.status == 200) {
				this.$message.success("系统数据生成中...")
			}
		},

		/**
		 * 重置密码
		 * @param row
		 * @returns {Promise<void>}
		 */
		async table_refresh(row) {
			let reqData = {userId: row.userId};
			this.$confirm(`确定重置 ${row.username} 账号密码吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				const loading = this.$loading();
				var res = await this.$API.system.user.refreshPwd.get(reqData);
				if (res.status == 200) {
					this.upsearch();
					this.$message.success("重置成功");
				}
				loading.close();
			}).catch(() => {

			})
		},

		/**
		 * 强制下线
		 * @param row
		 * @returns {Promise<void>}
		 */
		async table_offline(row) {
			let reqData = {userId: row.userId};
			this.$confirm(`确定强制 ${row.username} 账号下线吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				const loading = this.$loading();
				var res = await this.$API.system.user.offline.get(reqData);
				if (res.status == 200) {
					this.upsearch();
					this.$message.success("操作成功");
				}
				loading.close();
			}).catch(() => {

			})
		},

		/**
		 * 用户操作日志
		 * @param row
		 * @returns {Promise<void>}
		 */
		async table_log(row) {
			let reqData = {userId: row.userId};
			this.$message.warning(reqData.userId + "暂未开发...");
		},

		/**
		 * 导出档案
		 * @param row
		 * @returns {Promise<void>}
		 */
		async table_archives(row) {
			let reqData = {userId: row.userId}
			this.$confirm(`确定导出 ${row.username} 账号档案吗？`, '提示', {
				type: 'warning'
			}).then(async () => {
				const loading = this.$loading();
				var res = await this.$API.system.user.archives.get(reqData);
				if (res.status == 200) {
					this.$message.success("档案生成中...")
				}
				loading.close();
			}).catch(() => {

			})
		},

		/**
		 * 表格行选择后回调事件
		 * @param selection
		 */
		async selectionChange(selection) {
			this.selection = selection;
		}

	}
}
</script>

<style>
</style>
